<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item>
          <el-button type="success" plain @click="openBatchImport">
            <Icon icon="ep:upload" class="mr-5px" /> 批量导入
          </el-button>
          <el-button type="primary" plain @click="openGenerateRandomData">
            <Icon icon="ep:magic-stick" class="mr-5px" /> 随机生成数据
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 批量导入弹窗 -->
    <BatchImportForm ref="batchImportRef" @success="handleSuccess" />

    <!-- 随机生成数据弹窗 -->
    <RandomDataForm ref="randomDataFormRef" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import BatchImportForm from './components/BatchImportForm.vue'
import RandomDataForm from './components/RandomDataForm.vue'

// 查询条件
const queryFormRef = ref()
const queryParams = ref({})
const loading = ref(false)

// 引用组件
const batchImportRef = ref()
const randomDataFormRef = ref()

// 打开批量导入
const openBatchImport = () => {
  batchImportRef.value?.open()
}

// 打开随机生成数据
const openGenerateRandomData = () => {
  randomDataFormRef.value?.open()
}

// 操作成功的回调
const handleSuccess = () => {
  // 这里可以添加成功后的逻辑，如刷新数据等
}
</script>

<style lang="scss" scoped></style>
